<template>
  <div class="address-index container">
    <Header>
      <span v-if="addStatus">添加地址</span>
      <span v-else>修改地址</span>
    </Header>
    <section>
      <van-address-edit
        :area-list="areaList"
        show-set-default
        @save="onSave"
        v-if="addStatus"
      />

      <van-address-edit
        :address-info="AddressInfo"
        :area-list="areaList"
        show-delete
        show-set-default
        @save="onUpdate"
        @delete="onDelete"
        v-else
      />
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/common/Header.vue";
import Tabbar from "@/components/common/Tabbar";
import { areaList } from "@vant/area-data"; //安装位置数据npm i @vant/area-data并引用
import { Toast } from "vant";
//引入封装后的axiox
import http from "@/common/api/request";
export default {
  name: "Add-Address",
  components: { Header, Tabbar },
  data() {
    return {
      areaList,
      searchResult: [],
      addStatus: false,
    };
  },
  methods: {
    //添加地址
    onSave(content) {
      content.isDefault = content.isDefault == true ? 1 : 0;
      http
        .$axios({
          url: "/api/add_address",
          method: "post",
          headers: {
            token: true,
          },
          data: {
            ...content,
          },
        })
        .then((res) => {
          if (res.success) Toast(res.msg);
          this.$router.push("/address");
        });
    },
    //修改地址
    onUpdate(content) {
      content.isDefault = content.isDefault == true ? 1 : 0;
      http
        .$axios({
          url: "/api/update_address",
          method: "post",
          headers: {
            token: true,
          },
          data: {
            ...content,
          },
        })
        .then((res) => {
          if (res.success) Toast(res.msg);
          this.$router.push("/address");
        });
    },
    //删除地址
    onDelete(content) {
      http
        .$axios({
          url: "/api/delete_address",
          method: "post",
          headers: {
            token: true,
          },
          data: {
            id: content.id,
          },
        })
        .then((res) => {
          if (res.success) Toast(res.msg);
          this.$router.push("/address");
        });
    },

    goAddAddress() {
      this.$router.push({
        name: "add-address",
      });
    },
  },
  created() {
    let key = JSON.parse(this.$route.params.key);
    //判断是添加还是修改
    if (key == "add") {
      //添加
      this.addStatus = true;
    } else {
      //修改
      key.isDefault = key.isDefault == 1 ? true : false;
      this.AddressInfo = key;
    }
  },
};
</script>

<style scoped lang="scss">
section {
  flex: 1;
  background-color: #f5f5f5;
  .van-address-edit {
    padding: 0;
  }

  ::v-deep .van-address-edit__buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  ::v-deep .van-button--danger {
    width: 8rem;
    height: 1.066666rem;
    background-color: rgb(7, 193, 96);
    border: 0;
  }
  ::v-deep .van-button--default {
    width: 8rem;
    height: 1.066666rem;
    background-color: #b0352f;
    color: #fff;
  }
}

::v-deep .van-switch--on {
  background-color: #b0352f;
}

::v-deep .tabbar {
  /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 0px 0px 5px 1px #ccc;
}
</style>